<script setup>
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const onGoHome = () => {
    router.push('/')
  }
</script>

<template>
  <div class="not-found">
    <h1 class="not-found-title">404 Page Not Found</h1>
    <h1 class="not-found-title">对不起，你访问的页面不存在</h1>
    <el-button type="primary" @click="onGoHome">返回首页</el-button>
  </div>
</template>

<style scoped lang="less">
  .not-found {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .not-found-title {
    font-size: 50px;
    overflow-x: hidden;

    &:nth-child(2) {
      font-size: 40px;
      margin-bottom: 40px;
    }
  }
</style>
